<template>
  <div class="number-select" v-if="!getIsPhone">
    <play-instruction 
      :instruction="instruction">
    </play-instruction>
    <div :class="'select-row-wrapper-' + index" v-for="(item,index) in getCurrentLotteryState" :key="item.id">
      <lottery-box-only
        @click="handleUpdateData"
        :item="item">
      </lottery-box-only>
    </div>
  </div>
  <div class="number-select-phone" v-else>
    <lottery-box-flow-phone
      :item="item"
      v-for="(item, index) in getCurrentLotteryState"
      :key="item.id"
      @click="handleUpdateData"
      :class="'select-row-adjust-' + index"
    ></lottery-box-flow-phone>
  </div>
</template>

<script>
import LotteryBoxOnly from '@/components/lottery-type/common/lottery-box-only'
import PlayInstruction from '@/components/play-instruction/play-instruction'
import { mapGetters, mapMutations } from 'vuex'
import LotteryBoxCleanerPhone from '@/components/lottery-type/common/lottery-box-cleaner-phone'
import LotteryBoxFlowPhone from '@/components/lottery-type/common/lottery-box-flow-phone'
import { boxWithCleanerMixin } from '@/assets/js/mixin.js'
export default {
  mixins: [boxWithCleanerMixin],
  components: {
    PlayInstruction,
    LotteryBoxOnly,
    LotteryBoxFlowPhone

  },
  data() {
    return {
      instruction: 'ks和值',
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .select-row-wrapper-0 >>> .box 
    width 86px
    &.active 
      background rgba($color-ball-red, 0.102)
      border 1px solid $color-ball-red
      .box-top 
        color $color-ball-red
  .select-row-wrapper-1 >>> .box 
    width 86px
    .box-top 
      background $color-ball-red
      color #fff
    &.active 
      background rgba($color-ball-red, 0.102)
      border 1px solid $color-ball-red
  @media screen and (max-width 750px) 
    .select-row-adjust-0 >>> .box 
      width calc((100% - 40px) / 4) !important 
      &.active 
        background rgba($color-ball-red, 0.102)
        border 1px solid $color-ball-red
        .box-top 
          color $color-ball-red
    .select-row-adjust-1 >>> .box 
      width 86px
      .box-top 
        background $color-ball-red
        color #fff
      &.active 
        background rgba($color-ball-red, 0.102)
        border 1px solid $color-ball-red
      
</style>